<template>
  <view class="box1">
    <div class="nav">
      <uni-icons
        class="icon"
        @click="huitui"
        color="#fff"
        ;
        type="back"
        size="20"
      ></uni-icons>
      <text class="fabu">选择小区</text>
    </div>
    <view class="head">
      <view style="margin-top: 15px" class="h_one">
        <uni-icons type="search" size="30" class="h_icon"></uni-icons>
        <input type="text" class="inp" :focus="true" @input="search" />
      </view>
      <view
        class="lis"
        v-for="(item, index) in objs"
        :key="index"
        @click="resData(item.id)"
      >
        <uni-list-item showArrow :title="item.resident" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";


// 小区数据
const objs = ref();
//搜索数据
const inpsList = ref();
//  回退到上一级

let paths = uni.getStorageSync("path");
const huitui = () => {
  uni.navigateTo({ url: paths + '?data='+ '123' });
};

// 监听输入框事件
const search = (event) => {
  const value = event.detail.value;
  const newList = inpsList.value.filter((item) =>
    item.resident.includes(value)
  );
  console.log(newList, "=============list");
  objs.value = newList;
};

// 请求数据
onMounted(() => {
  const address = [];
  //  储存小区数据
  uni.request({
    url: "http://10.31.71.52:7002/housing",
    method: "GET",
    success: (res) => {
      let data = res.data.data;
      for (let i = 0; i < data.length; i++) {
        console.log(i, "=============ii");
        address.push(data[i]);
      }
      objs.value = address;
      inpsList.value = address;
    },
  });
});

// 点击小区回显页面
const resData = (id) => {
  const newData = objs.value.find((item) => item.id === id);
  const newlist = newData.resident;
  uni.navigateTo({ url: paths + '?data='+ `${newlist}` });
  uni.setStorageSync("xiaoqu", newlist);
};
</script>

<style lang="scss">
.box1 {
  .nav {
    width: 100vw;
    height: 100px;
    background: linear-gradient(to right, #3e85ef, rgb(46, 175, 255));
    position: relative;
    .fabu {
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
    }
  }
  .head {
    width: 100vw;
    // height: 100px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .h_one {
      position: relative;
      .h_icon {
        position: absolute;
        top: 0;
        left: 12%;
      }
    }
    .inp {
      width: 70%;
      height: 30px;
      border: none;
      background-color: #ded9d9;
      outline: none;
      border-radius: 2px;
      margin-left: 10%;
      padding-left: 50px;
    }
    .lis {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 10px;
      overflow: hidden;
    }
  }
}
</style>
